import React, { Component } from 'react';
import { connect } from 'dva';
import { Table, Modal, message } from 'antd';
import styles from './ListContent.less';
const confirm = Modal.confirm;

@connect(({ favoritePage }) => ({
  pageList: favoritePage.pageList,
  pageDetail: favoritePage.pageDetail,
}))
class ListContent extends Component {
  state = {
    page_num: 1,
    page_size: 10,
    modal_visible: false,
  };

  updateList() {
    const { dispatch } = this.props;
    dispatch({
      type: 'favoritePage/queryPageList',
      payload: {
        page_size: this.state.page_size,
        page_num: this.state.page_num,
      },
    });
  }

  updateDetail(page_id, page_type) {
    const { dispatch } = this.props;
    return dispatch({
      type: 'favoritePage/queryDetail',
      payload: {
        id: page_id,
        type: page_type,
      },
    });
  }

  confirmRemove(payload, e) {
    e.preventDefault();
    console.log('参数：', payload);
    const { id, title, api_type } = payload;
    const self = this;
    confirm({
      title: '确认要删除这条信息吗？',
      content: '',
      okText: '确认',
      cancelText: '取消',
      onOk() {
        self.props
          .dispatch({
            type: 'favoritePage/remove',
            payload: {
              id,
              is_col: '-1',
              title,
              api_type,
            },
          })
          .then(() => {
            console.log('删除成功回调！');
            // 刷新列表
            self.updateList();
          });
      },
      onCancel() {},
    });
  }

  componentDidMount() {
    this.setState({ loading: false });
    this.updateList();

    // 测试数据
    // this.props.dispatch({
    //   type: 'favoritePage/remove',
    //   payload: {
    //     id: '0b9ba44552b26d9b1ae3567628813fe3',
    //     is_col: '1',
    //     title: '盛和资源公布多项措施维护股价稳定',
    //     api_type: 'wealth_knows'
    //   },
    // });
  }

  render() {
    let { pageList, pageDetail, dispatch } = this.props;
    const that = this;

    let handleClickTitle = (page_id, page_type) => {
      that.updateDetail(page_id, page_type).then(
        () => {
          this.setState({ modal_visible: true });
        },
        e => {
          console.log(e);
          message.error('服务暂时不可用，请稍后再试！');
          // message.error(e.message);
        }
      );
    };

    const columns = [
      {
        title: '标题',
        dataIndex: 'title',
        key: 'title',
        render: (title, record) => (
          <span>
            <a
              onClick={() => {
                handleClickTitle(record.id, record.api_type);
              }}
            >
              {title}
            </a>
          </span>
        ),
      },
      {
        title: '日期',
        dataIndex: 'published_time',
        key: 'published_time',
      },
      {
        title: '操作',
        key: 'action',
        render: (text, record) => {
          return (
            <span>
              <a
                href="#"
                onClick={e => {
                  this.confirmRemove(record, e);
                }}
              >
                删除
              </a>
            </span>
          );
        },
      },
    ];

    const pager = {
      total: pageList.total_count,
      current: this.state.page_num,
      pageSize: this.state.page_size,
      onChange: page => {
        that.setState({ page_num: page }, () => {
          that.updateList();
        });
      },
    };

    let handleCancel = () => {
      this.setState({ modal_visible: false });
    };

    return (
      <div className={styles.outerWidthLim}>
        <div className={styles.mainContentContainer}>
          <Table columns={columns} dataSource={pageList.data_list} pagination={pager} />
        </div>
        <Modal
          visible={this.state.modal_visible}
          title={pageDetail.title}
          onCancel={handleCancel}
          footer={[]}
        >
          <div dangerouslySetInnerHTML={{ __html: pageDetail.content }} />
        </Modal>
      </div>
    );
  }
}

export default ListContent;
